<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>


<script src="${path}/static/echarts-all.js" type="text/javascript" />

<style>
    #main{
        width: 1000px;
    }
</style>
<script type="text/javascript">
    var relationData = [];
    $(function(){
        $.ajax({
            type: "POST",
            url:"${path}/appVip/dataGridTree",
            data:{
                "vipCode":"s001"
            },
            async: false,
            success: function(data) {
                relationData =  JSON.parse(data);
            }
        });

    });

    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        tooltip : {
            trigger: 'item',
            formatter: "{b}: {c}"
        },
        series : [
            {
                name:'关系图',
                type:'tree',
                orient: 'vertical',  // vertical horizontal
                rootLocation: {x: 'center', y: 80}, // 根节点位置  {x: 'center',y: 30}
                nodePadding: 55,
                symbol: 'image://${path}/static/img/top_user.png',
                symbolSize: 100,
                symbolRotate:90,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#cc9999',
                                fontSize: 10,
                                fontWeight:  ''
                            }
                        },
                        lineStyle: {
                            color: '#000',
                            width: 2,
                            type: 'broken' ,// 'curve'|'broken'|'solid'|'dotted'|'dashed'
                            color: '#193FD8',
                            shadowOffsetX: 30,
                            shadowOffsetY: 50

                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                data:relationData
            }
        ]
    };
    myChart.setOption(option);


    $(function(){
        //当前屏幕的宽高
        var body_width = document.documentElement.clientWidth;
        var body_hei = document.documentElement.clientHeight;
        var h_boxTop = body_hei - $('.h_box').height();
        var wth = parseFloat($('#main').css('width'));
        window.scrollTo(wth/4,0);
        $('.search_bg,.reset').css('width',document.documentElement.clientWidth);
        $('.reset').click(function(){
            window.scrollTo(wth/4,0);
        })
        $(window).scroll(function(){
            // 滚动条距离顶部的距离 大于 200px时
            $('#h_black').css('display','none');
            $('.h_box').css('display','none');
        });

    })


    function nextOpt(e){
        parent.$.messager.defaults = { ok: "开户",cancel: "切线"  };
        parent.$.messager.confirm('询问', '请选择您的操作？', function(b) {
            if (b) {
                addAppUser(e.value);
            }else{
                editAppUser(e.value);
            }
        });

    }

    var ecConfig =  echarts.config;
    myChart.on(ecConfig.EVENT.CLICK, nextOpt);


    function searchDataGridTree() {
        $.ajax({
            type: "POST",
            url:"${path}/appVip/dataGridTree",
            data:{
                "vipCode":$('input[name=name]').val()
            },
            success: function(data) {
                relationData =  JSON.parse(data);
                option.series[0].data = relationData;
                myChart.clear();
                myChart.setOption(option);
            }
        });
    }

    function addAppUser(vipCode) {
        parent.$.modalDialog({
            title : '开户',
            width : 500,
            height : 350,
            href : '${path }/appVip/appUserPage?vipCode=' + vipCode,
            buttons : [ {
                text : '确定',
                handler : function() {
                    var f = parent.$.modalDialog.handler.find('#addAppUserByImgForm');
                    f.submit();
                    searchDataGridTree();
                }
            } ]
        });

    }
    
    function editAppUser(vipCode) {
        parent.$.modalDialog({
            title : '编辑',
            width : 500,
            height : 350,
            href : '${path }/appVip/editUserPage?vipCode=' + vipCode,
            buttons : [ {
                text : '确定',
                handler : function() {
                    var f = parent.$.modalDialog.handler.find('#editUserAddChargeForm');
                    f.submit();
                }
            } ]
        });
    }



</script>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 30px;  background-color: #fff">
            <table>
                <tr>
                    <th>姓名:</th>
                    <td><input name="name" placeholder="请输入用户账号" value=""/></td>
                    <td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'fi-magnifying-glass',plain:true" onclick="searchDataGridTree();">查询</a></td>
                </tr>
            </table>
    </div>
    <div id="main" style="height:5000px;"></div>
</div>


